// src/components/popups/sponsorOverview/scholarshipsByCompany/ScholarshipsByCompanyBarChart.tsx

import React from 'react';
import ReactECharts from 'echarts-for-react';

interface BarChartProps {
  data: { company: string; sponsorshipCost: number }[];
}

const ScholarshipsByCompanyBarChart: React.FC<BarChartProps> = ({ data }) => {
  const isSmallScreen = typeof window !== 'undefined' && window.innerWidth < 640;
  const isDark = typeof window !== 'undefined' && document.documentElement.classList.contains('dark');
  const sorted = [...data]
    .sort((a, b) => b.sponsorshipCost - a.sponsorshipCost)
    .slice(0, 20)
    .reverse();
  const chartMinWidth = isSmallScreen ? 350 : 600;
  const chartHeight = isSmallScreen ? 500 : 900;
  const mainColor = isDark ? '#06b6d4' : '#2563eb';
  const axisColor = isDark ? '#94a3b8' : '#64748b';
  const labelColor = isDark ? '#e0f2fe' : '#1e293b';
  const gridLineColor = isDark ? '#334155' : '#e5e7eb';
  const tooltipBg = isDark ? '#1e293b' : '#fff';
  const tooltipText = isDark ? '#e0f2fe' : '#222';
  const tooltipBorder = isDark ? '#06b6d4' : '#2563eb';

  const option = {
    title: {
      text: 'Top 20 Companies by Sponsorship Cost',
      left: 'center',
      textStyle: { fontWeight: 'bold', fontSize: isSmallScreen ? 14 : 20, color: labelColor }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: tooltipBg,
      borderColor: tooltipBorder,
      borderWidth: 1,
      textStyle: { color: tooltipText, fontWeight: 'bold' },
      extraCssText: 'box-shadow:0 2px 12px rgba(0,0,0,0.1); border-radius:8px;',
      formatter: function (params: unknown) {
        const d = (params as Array<{ name: string; value: number }>)[0];
        const value = Number(d?.value ?? 0);
        return `<b>${d.name}</b><br/>Sponsorship Cost: <b>$${value.toLocaleString()}</b>`;
      }
    },
    grid: { left: isSmallScreen ? 100 : 220, right: isSmallScreen ? 20 : 120, bottom: isSmallScreen ? 40 : 90, top: isSmallScreen ? 30 : 70 },
    xAxis: {
      type: 'value',
      name: 'Sponsorship Cost ($)',
      nameLocation: 'middle',
      nameGap: isSmallScreen ? 20 : 40,
      nameTextStyle: { fontWeight: 'bold', color: axisColor, fontSize: isSmallScreen ? 12 : 16, align: 'center' },
      axisLabel: { color: axisColor, fontWeight: 'bold', fontSize: isSmallScreen ? 10 : 13 },
      axisLine: { show: false },
      splitLine: { show: true, lineStyle: { color: gridLineColor, type: 'dashed' } },
    },
    yAxis: {
      type: 'category',
      data: sorted.map(d => d.company),
      axisLabel: {
        fontWeight: 'bold',
        color: labelColor,
        fontSize: isSmallScreen ? 10 : 16,
        width: isSmallScreen ? 80 : 200,
        overflow: 'truncate',
        showTooltip: true,
        interval: 0,
        lineHeight: isSmallScreen ? 14 : 24,
        formatter: function (value: string) {
          return value.length > 16 ? value.slice(0, 15) + '…' : value;
        },
      },
      axisLine: { lineStyle: { color: gridLineColor, width: 2 } },
      axisTick: { show: false }
    },
    series: [
      {
        data: sorted.map(d => d.sponsorshipCost),
        type: 'bar',
        itemStyle: {
          color: mainColor,
          borderRadius: [0, 8, 8, 0],
          shadowColor: mainColor + '33',
          shadowBlur: 8
        },
        barWidth: isSmallScreen ? '30%' : '50%',
        label: {
          show: true,
          position: 'right',
          distance: isSmallScreen ? 8 : 20,
          color: '#fff',
          fontWeight: 'bold',
          fontSize: isSmallScreen ? 10 : 14,
          backgroundColor: mainColor,
          borderRadius: 8,
          padding: isSmallScreen ? [2, 4] : [4, 8],
          shadowColor: mainColor + '55',
          shadowBlur: 6,
        },
        emphasis: {
          itemStyle: {
            color: isDark ? '#0891b2' : '#1d4ed8',
            shadowColor: (isDark ? '#0891b2' : '#1d4ed8') + 'aa',
            shadowBlur: 12
          },
          label: {
            backgroundColor: isDark ? '#0891b2' : '#1d4ed8',
            color: '#fff',
          }
        }
      }
    ]
  };

  if (!data || data.length === 0) {
    return (
      <div className="w-full flex items-center justify-center py-12 text-gray-400 italic text-base">No scholarship records found.</div>
    );
  }

  return (
    <div className="w-full overflow-x-auto">
      <div style={{ minWidth: chartMinWidth }}>
        <ReactECharts option={option} style={{ height: chartHeight, width: '100%' }} />
      </div>
    </div>
  );
};

export default ScholarshipsByCompanyBarChart; 